<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全局组件</title>
	</head>
	<body>
		<div id="app4" v-cloak>
			<add-num-com></add-num-com>
			<sub-num-com></sub-num-com>
			<com1></com1>
		</div>
		
		<template id="com1Tem">
			<div>
				<h1>局部组件1</h1>
				{{msg}}
			</div>
		</template>
		
		<template id="addNumTem">
			<span>
				data:{{num}}
				<button type="button" @click="addOne()">加一</button>
				<button @click="subOne()">减一</button>
			</span>
		</template>
		<template id="subNumTem">
			<h1>
				data:{{num2}}
				<button @click="subOne()">减一</button>
			</h1>
		</template>
		
		<script src="../vue.js"></script>
		<script>
			Vue.component("addNumCom",{
				data(){
					return {
						num: 1
					}
				},
				template: "#addNumTem",
				methods: {
					addOne(){
						this.num++
					},
					subOne(){
						this.num--
					}
				}
			})
			// Vue.component("addStrKing",{
			// 	data(){
			// 		return {
			// 			str: 'King'
			// 		}
			// 	}
			// })
			Vue.component("subNumCom",{
				data(){
					return {
						num2: 100
					}
				},
				template: "#subNumTem",
				methods:{
					subOne(){
						this.num2--
					}
				}
			})
			
			// let hello1 = {
				
			// }
			
			let hello1 = {
				data(){
					return {
						msg: "组件1"
					}
				},
				template: "#com1Tem"
			}
			
			const a2 = new Vue({
				el: '#app4',
				data: {
					
					},
				methods:{
					
				},
				components: {
					com1: hello1
				}
			})
		</script>
	</body>
</html>
